<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">

        let myname = "张三";

        // jsx创建的元素
        let h1s = <h1>Hello, world!</h1>;
        // jsx创建的元素
        let divs = <div>
            <span>你好 {myname}</span>
        </div>;
        // react的函数组件
        function HeadCom() {
            let fiocn = "系统"

            return (
                <React.Fragment>
                    <h1>我是头部组件</h1>
                    <IconCom iconName={fiocn} />
                </React.Fragment>
            )
        }
        // react的函数组件
        function IconCom(props) {
            // 返回多个元素
            // props.属性 来接受父组件传来的参数
            return (<div>
                <i>我是主页图标</i>
                <i>我是设置图标</i>
                <i>我是设置图标</i>
                <i>我是{props.iconName}图标</i>
            </div>)
        }
        // react 的类(class)式组件
        class Cart extends React.Component {
            // 类式组件的生命周期 dom元素渲染中
            render() {
                return (
                    <div>
                        <h1>我是购物车组件{this.props.price}</h1>
                    </div>
                )
            }
        }
        // 组合组件 class组件和函数组件的组合
        function My() {
            return (
                <div>
                    <h1>我是个人中心组件头部</h1>
                    <Login />
                    <h1>我是个人中心组件脚步</h1>
                </div>
            )
        }
        class Login extends React.Component {
            render() {
                return (<div>
                    <h1>我是登录组件</h1>
                </div>)
            }
        }
        // ReactDOM.render(元素和组件，容器元素)
        // React.Fragment 包裹多个元素 一般放置到根部
        ReactDOM.render(
            <React.Fragment>
                {h1s}{divs}
                <HeadCom />
                <Cart price={'188'} />
                <My />
            </React.Fragment>,
            document.getElementById('root'));

    </script>
</body>

</html>